<script lang="ts" setup>
import { ref, reactive, nextTick } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

import homeOtherProductUtil from "../home/homeOtherProductUtil.vue";
import reqApis from '../../../req/reqApis';


const currentData = ref<any>({
  shopId: router.currentRoute.value.query.shopId,
  list: []
});

const getProductByShopIdFn = () => {
  let params ={
    shopId: currentData.value.shopId
  }
  reqApis.getProductByShopIdApi(params).then((res:any) =>{
    if(res.data && res.data.length>0) {
      currentData.value.list.push(...res.data);
    }
  })
};
getProductByShopIdFn();
</script>

<template>
  <section class="productListUtil">
    <div class="title">超值商品</div>
    <div class="content">
      <homeOtherProductUtil :product="item" v-for="(item, index) in currentData.list" :key="index" :iNow="1"></homeOtherProductUtil>
    </div>
  </section>
</template>

<style lang="less" scoped>
.productListUtil {
  width: 3.75rem;
  padding: 0 .1rem;
  box-sizing: border-box;
  .title {
    width: 3.55rem;
    height: .44rem;
    display: flex;
    align-items: center;
    background: white;
    padding-left: .15rem;
    box-sizing: border-box;
    border-radius: .05rem .05rem 0 0;
    margin-bottom: .05rem;
    color: rgb(46, 45, 45);
    font-size: .17rem;
    font-weight: bold;
    position: relative;
    &::after {
      width: .04rem;
      height: .18rem;
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      margin-top: -.09rem;
      background: rgb(240, 37, 15);
    }
  }
  .content {
    >section {
      float: left;
      margin-bottom: .05rem;
      &:nth-of-type(2n) {
        float: right;
      }
    }
    
  }
}
</style>

